<template>
  <div class="edit-attr clear">
    <div class="result-list">
      <div class="item">
        <p class="title">家长属性 <span>Parental Attributes</span></p>
        <div class="attr">
          <span class="left">主属性</span>
          <popup-radio :options="type_list" v-model="zhu_num" placeholder="请选择属性"></popup-radio>
          <img src="@/assets/bianjiziliao02.png" alt="">
        </div>
        <div class="attr">
          <span class="left">副属性</span>
          <popup-radio :options="type_list" v-model="fu_num" placeholder="请选择属性"></popup-radio>
          <img src="@/assets/bianjiziliao02.png" alt="">
        </div>
      </div>
      <div class="item">
        <p class="title">孩子属性 <span>Child Attributes</span></p>
        <div class="attr">
          <span class="left">孩子属性</span>
          <popup-radio :options="type_list" v-model="child_num" placeholder="请选择属性"></popup-radio>
          <img src="@/assets/bianjiziliao02.png" alt="">
        </div>
      </div>
    </div>
    <span class="btn" @click="made_save">确认</span>
  </div>
</template>

<script>
  import { madeSave } from '@/api/api';
  import { PopupRadio, AlertModule } from "vux";
  export default {
    components: {
      PopupRadio,
    },
    data () {
      return {
        is_mask: false,
        type_list: [{key: "1", value: '木'}, {key: "2", value: '火'}, {key: "3", value: '土'}, {key: "4", value: '金'}, {key: "5", value: '水'}],
        zhu_num: '',
        fu_num: '',
        child_num: '',
      }
    },
    created () {
      this.miyao = this.$route.query.miyao
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      made_save() {
        var dataJson = {
          is_child_host: this.child_num,
          is_deputy: this.fu_num,
          is_host: this.zhu_num,
          miyao: this.miyao
        }
        madeSave(dataJson).then((res) => {
          AlertModule.show({
            title: '温馨提示',
            content: res.data.msg
          })
          if(res.data.code == '200'){
            this.router({path: './planMake'})
          }
        }).catch((err) => {
          console.dir(err)
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
.edit-attr
  min-height 100vh
  min-width 100vw
  background-color #f5f5f5
  .result-list
    padding-top 11.7rem
    background-image url('../../assets/shuxingb.png')
    background-repeat no-repeat
    background-size 100%
    width 100%
    .item
      width 92%
      margin-left 4%
      border-radius .3rem
      background-color #fff
      box-sizing border-box
      margin-bottom 1rem
      .title
        color #152D6F
        font-size 1.5rem
        font-weight bold
        line-height 4.5rem
        height 4.5rem
        padding 0 1.6rem 
        span
          color #999
          font-size 1.2rem
          margin-left .5rem
          font-weight 400
      .section
        padding 1.6rem 0
      .attr
        height 5rem
        line-height 5rem
        overflow hidden
        margin 0 1.5rem
        border-bottom 1px solid #e6e6e6
        position relative
        &:last-child
          border none
        .left
          font-size 1.5rem
          color #333
          float left
        img
          position absolute
          width .6rem
          top 2rem
          right 0
  .btn
    width 92%
    margin-left 4%
    margin-top 2rem
    float left
    background-color #172F6D
    color #fff
    font-size 1.7rem
    line-height 5rem
    height 5rem
    text-align center
    border-radius 100px
</style>
